<script type="text/x-template" id="dmp-check-response">
    <el-row>
        <el-col :span="12">
            <el-card class="form-card" >
                    <el-form ref="requestForm" :rules="rules" :model="requestModel">
                        <el-form-item label="请求url" prop="url">
                            <el-autocomplete style="width: 60%"
                                             class="inline-input"
                                             v-model="requestModel.url"
                                             :fetch-suggestions="querySearch"
                                             placeholder="http://172.20.135.124:8010/v2/search/isDevicePolicy"
                                             clearable
                            ></el-autocomplete>
                        </el-form-item>
                        <el-form-item>
                             <cc-header-url-tabs
                                     :activeTab="activeTab"
                                     :header ="requestHeader"
                                     :param ="requestParams"
                                     @header-change="handleHeaderChange"
                                     @param-change="handleParamChange"
                             />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSubmit('requestForm')" style="width: 200px">提交
                            </el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-form>
            </el-card>
        </el-col>
        <el-col :span="12">
                <el-card class="json-card">
                    <div slot="header" class="clearfix">
                        <span>返回Json信息</span>
                    </div>
                    <pre class="json">{{ jsonString }}</pre>
                </el-card>
        </el-col>
    </el-row>
</script>

<script>
    Vue.component('dmp-check-response', {
        template: '#dmp-check-response',
        data() {
            return {
                activeTab: 'header',
                jsonString: '',
                restaurants: [],
                requestModel: {
                    url: 'http://172.20.135.124:8010/v2/search/isDevicePolicy',
                },
                requestHeader: '',
                requestParams: 'policyIds:',
                urls: {
                    thirdApi: '/v1/thirdApi'
                },
                rules: {
                    url: [
                        {required: true, message: '请输入请求url'}
                    ]
                }
            }
        },
        computed: {},
        methods: {
            handleHeaderChange(header){
                this.requestHeader=header
            },
            handleParamChange(param){
                this.requestParams=param
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) =>
                {
                    return (restaurant.label.indexOf(queryString) === 0);
                }
                ;
            },
            loadAll() {
                return [
                    {"value": "http://172.20.135.124:8010/v2/search/isDevicePolicy", "label": "dmp请求测试地址"},
                    {"value": "http://api-hoder.skysrt.com//v2/search/isDevicePolicy", "label": "dmp请求正式地址"},
                ];
            },
            resetForm: function () {
                //重置按钮
                this.$refs.requestForm.resetFields();
            },
            handleSubmit() {
                this.$refs.requestForm.validate(function (valid) {
                    if (valid) {
                        var isOk = true;
                        if (!this.requestHeader){
                            isOk=false;
                            if (this.activeTab !== 'header'){
                                this.activeTab='header'
                            }
                            this.$message('请输入请求头');
                        }else if(!this.requestParams){
                            isOk=false;
                            if (this.activeTab !== 'param'){
                                this.activeTab='param'
                            }
                            this.$message('请输入请求url参数');
                        }else if(this.requestParams){
                            var jsonParams = this.convert2KeyValObj(this.requestParams);
                            if (!jsonParams.policyIds){
                                isOk=false;
                                if (this.activeTab !== 'param'){
                                    this.activeTab='param'
                                }
                                this.$message('请输入请求url参数: policyIds');
                            }
                        }
                        if (isOk){
                            this.mockData()
                        }
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            mockData() {
                var header = this.convert2KeyValObj(this.requestHeader);
                var params = this.convert2KeyValObj(this.requestParams);
                params.devId = header.cUDID;
                params.mac = header.MAC;
                params.reqSource = '2';
                params.devInfo = JSON.stringify(header);
                let request = {};
                request.url = this.requestModel.url;
                request.header = JSON.stringify(header);
                request.params = JSON.stringify(params);
                 this.ajax(this.urls.thirdApi, request,
                         function (result) {
                             if (result.code === '0') {
                                 this.jsonString = JSON.stringify(JSON.parse(result.data), null, 2);
                             } else {
                                 this.$message(result.msg);
                             }
                         }.bind(this)
                 );
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        },
        created() {
        }
    })
</script>
<style>
    .select-option {

    div {
        width: 200px;
    }

    }
    .json {
        text-align: left;
    }

    .form-card {
        text-align: left;
        vertical-align: middle;
        width: 100%;
    }
    .json-card {
        text-align: left;
        vertical-align: middle;
        height: auto;
        width: 100%;
    }
</style>
